<template>
  <div id="dataview">
    <div class="item" v-for="item,index in data" :key="index">
        <div class="icon">
            <span class="iconfont">&#xe88c;</span>
        </div>
        <div class="content">
            <h5>{{ item.content }}</h5>
        <h5>{{ item.value }}</h5>
        </div>
    </div>

  </div>
</template>

<script>
export default {
    props:['data']
}
</script>

<style lang="less" scoped>
#dataview{
    // width: 400px;
    display: flex;
    // justify-content: space-around;
    justify-content: space-between;  /*两端对齐，子元素之间有间隙*/
    flex-flow: row wrap;/*子元素溢出父容器时换行*/
    .item{
        width: 12%;
        background-color: rgb(36, 105, 197);
        border-radius: 30px;
        text-align: center;
        display: flex;
        margin-right: 30px;
        margin-bottom: 10px;
        .icon{
            padding:0.5rem 0.5rem;
            color: aliceblue;
            .iconfont{
                font-size: 26px;
                color: aliceblue;
            }
        }
        .content{
            display: block;
            padding:0.5rem 0.5rem;
            color: aliceblue;
        }
    }

}

@media screen and (max-width: 720px) {
#dataview{
    margin-top: 2rem;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .item{
        width:18%;
        .icon{
            padding-right:0.1rem;
            .iconfont{
                font-size: calc(100vw * 60 / 1920);

            }
        }
        .content{
            font-size: calc(100vw * 60 / 1920);
            display: block;
            padding:0.5rem 0.1rem;
        }
    }

}

}
</style>